<template>
   <view class="index-list">
      <view class="index-list-wrap">
         <scroll-view scroll-y="true" style="height: 100%;" :scroll-top="scrollTop" scroll-with-animation
            @scroll="onScroll">
            <view class="index-list_content">
               <view class="index-list-item" v-for="item in dataList" :key="item.index">
                  <view class="index-anchor" :class="item">
                     <text>{{ item.index }}</text>
                  </view>
                  <view class="index-item" v-for="person in item.data" :key="person.uid">
                     <u-cell :title="person.name" isLink @click="goItem(person)">
                        <u-avatar slot="icon" :src="fileUrl + person.avatar" :size="28" style="margin-right: 10px;"></u-avatar>
                     </u-cell>
                  </view>
               </view>
               <u-gap height="20" bgColor="#f5f5f5"></u-gap>
            </view>
         </scroll-view>
         <view class="index-list-anchor">
            <view class="anchor-label" v-for="(item, i) in dataList" :key="item.index"
               @click="scrollTo(item.index, i)">
               <text :class="{'actived': currentIndex == item.index}">{{ item.index }}</text>
            </view>
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      props: {
         data: {
            type: Array,
            default: []
         }
      },
      data() {
         return {
            scrollTop: 0,
            scrollToArr: [],
            currentIndex: 'A',
			   indexList: []
         }
      },
      computed: {
         dataList() {
            const arr = []
            this.data.forEach(item => {
               const index = arr.findIndex(letter => {
                  return item.char == letter.index
               })
               if(index === -1) {
                  arr.push({ index: item.char })
               }
            })
            arr.sort((a, b) => {
               return a.index.localeCompare(b.index)
            })
            arr.map(item => {
               return item.data = this.data.filter(x => {
                  return x.char == item.index
               })
            })
            return arr
         }
      },
      mounted() {
         const query = uni.createSelectorQuery().in(this)
         query.selectAll('.index-list-item').boundingClientRect(data => {
            data.forEach((client, i) => {
               if (i > 0) {
                  this.scrollToArr.push(data[i - 1].height + this.scrollToArr[i - 1])
               } else {
                  this.scrollToArr.push(0)
               }
            })
         }).exec()
      },
      methods: {
         onScroll(e) {
            const nowTop = e.detail.scrollTop
            let index = 0
            for (let i = 0; i < this.scrollToArr.length - 1; i++) {
               if(nowTop < this.scrollToArr[i + 1]) {
                  index = i
                  break
               }
            }
            this.currentIndex = this.dataList[index].index
         },
         scrollTo(item, index) {
            this.currentIndex = item
            this.scrollTop = this.scrollToArr[index]
         },
         goItem(item) {
            uni.navigateTo({
               url: `/pages/tab3/chat/index?uid=${item.uid}&name=${item.name}&avatar=${item.avatar}`
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .index-list {
      height: 100%;

      .index-list-wrap {
         position: relative;
         height: 100%;
      }

      .index-list-anchor {
         position: fixed;
         top: 60px;
         right: 10px;

         text {
            display: inline-block;
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
         }

         .actived {
            border-radius: 50%;
            background-color: #0aa679;
            color: #fff;
         }
      }

      .index-list_content {
         position: relative;

         .index-list-item {

            .index-anchor {
               padding: 5px 10px;
               background-color: transparent;
               font-size: 14px;
            }

            .index-item {
               background-color: #fff;
            }
         }
      }

   }
</style>
